<template>
   <div class="box">
   <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="姓名">
            <el-input v-model="form.name" 
            placeholder="请输入姓名">
            </el-input>
         </el-form-item>
         <el-form-item label="电话号码">
            <el-input v-model="form.tel"
             placeholder="请输入电话号码">
            </el-input>
         </el-form-item>
         <el-form-item label="我的关系">
            <el-select v-model="form.region" placeholder="选择和我的关系"
            @change="selectChange"
            >
               <el-option label="亲人" value="1"></el-option>
               <el-option label="朋友" value="2"></el-option>
               <el-option label="同学" value="3"></el-option>
            </el-select>
         </el-form-item>
  
  


  <el-form-item>
    <el-button type="primary" @click="onSubmit">添加</el-button>
  </el-form-item>
</el-form>


   </div>
</template>

<script>
import {addPhoneApi} from "@/utils/https.js"
export default {
 data() {
      return {
        form: {
          name: '',
          region: '',
          tel:"",
          label:""
        }
      }
    },
    methods: {
      //添加事件
      onSubmit() {
         addPhoneApi({
              name:this.form.name,
              tel:this.form.tel,
              label:this.form.label
         }).then(res=>{
             if(res.code==0){
               this.$router.push("/layout/")
             }
         })
      },
      selectChange(val){
         console.log(val);
         this.form.label=val
      }
    }
}
</script>

<style lang="less" scoped>
  .box{width:300px;height: 200px;margin: 0 auto;
      margin-top: 30px;
  }

</style>